<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body onload="show()">
  <div id="d1"></div>
  <script>
    function show() {
      // 1.创建异步请求
      var xhr = new XMLHttpRequest();
      // 4.打开监听，接收响应
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
          var r = JSON.parse(xhr.responseText);
          // html接口字符串--1表头
          var htmlStr = `
          <table border="1" bordercolor="purple">
            <tr>
              <th>用户名称</th>
              <th>用户邮箱</th>
              <th>联系方式</th>
              <th>真实姓名</th>
              <th>用户性别</th>
              <th>操作</th>
            </tr>
          `;
          // html接口字符串--2循环表行
          for (var i = 0; i < r.length; i++) {
            var sex = "保密";
            if (r[i].gender == 1) {
              sex = "男";
            } else if (r[i].gender == 0) {
              sex = "女";
            } else {
              sex = "保密";
            }
            htmlStr += `
              <tr>
                <td>${r[i].uname}</td>
                <td>${r[i].email}</td>
                <td>${r[i].phone}</td>
                <td>${r[i].user_name}</td>
                <td>${sex}</td>
                <td>
                  <a href="search.html?uid=${r[i].uid}">修改</a>
                  <a href="javascript:del(${r[i].uid})">删除</a>
                </td>
              </tr>
            `;
          }
          // html接口字符串--3结尾
          htmlStr += `</table>`;
          d1.innerHTML = htmlStr;
        }
      }
      // 2.打开连接，创建请求
      xhr.open("get", "/pro/v1/list", true);
      // 3.发送响应
      xhr.send();
    }
    function del($uid) {
      // var $uid = uid.value;
      // 1.创建异步对象
      var xhr = new XMLHttpRequest();
      // 4.接收响应，创建监听
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
          var r = xhr.responseText;
          console.log(r);
          if (r == 1) {
            alert("删除成功");
            show();
          } else {
            alert('删除失败');
          }
        }
      }
      // 2.创建请求，打开连接
      xhr.open("delete", "/pro/v1/del/" + $uid, true);
      // 3.发送请求
      xhr.send();
    }
  </script>
</body>

</html>